<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>state_easy</title>
</head>

<body>
  <!-- 准备好容器 -->
  <div id="test"></div>

  <!--引入react核心库-->
  <script src="../react.js-16/react.development.js" type="text/javascript"></script>
  <!--引入react-dom，用于支持react操作DOM-->
  <script src="../react.js-16/react-dom.development.js" type="text/javascript"></script>
  <!--引入label，用于将jsx转为js-->
  <script src="../react.js-16/babel.min.js" type="text/javascript"></script>

  <script type="text/babel">
    //1.创建组件
    class Weather extends React.Component {
      //constructor(props) {
      //  super(props)
      //  //this.state = { isHot: false }
      //  //this.theClick = this.theClick.bind(this)
      //}

      state = { isHot: false }

      render() {
        const { isHot } = this.state
        return <h1 id="title" onClick={this.theClick}>The weather is {isHot ? 'hot' : 'cool'} today</h1>
      }

      //自定义方法————要用赋值语句的形式+箭头函数
      theClick = () => {
        console.log(this);

        const isHot = this.state.isHot
        this.setState({ isHot: !isHot })
      }
    }

    //2.渲染组件到页面
    ReactDOM.render(<Weather />, document.getElementById('test'))
  </script>
</body>

</html>